<template>
	<div class="layout-content">
	    <IForm :model="form" ref="form" :label-width="100" :rules="formRule" title="更新配置" >
			<FormItem prop="headImg" label="头像">
				<Avatar icon="ios-person" size="large" :src="form.headImg" />
				<a href="javascript:void(0)" v-on:click="changeHeadImg">头像修改</a>
	        </FormItem>
	        <FormItem prop="reallyName" label="真实姓名">
	            <IInput v-model="form.reallyName" size="large" placeholder="真实姓名" clearable />
	        </FormItem>
	        <FormItem prop="age" label="年龄">
	            <InputNumber :max="100" :min="18" v-model="form.age" />
	        </FormItem>
	        <FormItem prop="sex" label="性别">
				<RadioGroup v-model="form.sex" type="button">
			        <Radio label="1">男</Radio>
			        <Radio label="2">女</Radio>
			    </RadioGroup>
	        </FormItem>
	        <FormItem prop="idNumber" label="身份证号码">
	            <IInput v-model="form.idNumber" size="large" placeholder="身份证号码" clearable />
	        </FormItem>
	        <FormItem prop="district" label="现住地址">
	        	<Cascader v-model="form.district" :data="district" trigger="hover"></Cascader>
	        	<IInput v-model="form.address" size="large" placeholder="详细地址" clearable />
	        </FormItem>
	        <FormItem>
	            <Button type="primary" @click="save" :loading="loading">保存</Button>
	        </FormItem>
	    </IForm>
	    <ModalCropperImg ref="modalCropperImg" fileArea="admin/avatar" :callback="getHeadImg"></ModalCropperImg>
	</div>
</template>
<script>
	import {Form,Input,Button,InputNumber,RadioGroup,Radio,Cascader,Avatar} from 'iview';

	import ModalCropperImg from 'admin/components/common/modal-cropper-img.vue';
	export default {
		data () {
            return {
            	district : [],
            	form:{
            		headImg : '',
					reallyName : '',
					age : 18,
					sex : '1',
					idNumber : '',
					district : [],
					address : '',
            	},
            	loading : false,
            	formRule : {
	                key: [
	                    { required: true, message: '请填写配置名', trigger: 'blur' },
	                ],
	            },
            }
        },
        components:{
	        'IInput' : Input,
			'IForm' : Form,
			'FormItem' : Form.Item,
			Button,
			InputNumber,
			RadioGroup,
			Radio,
			Cascader,
			Avatar,
			ModalCropperImg,
	    },
	    methods:{
	    	//打开截取头像modal
	    	changeHeadImg(){
	    		this.$refs.modalCropperImg.img = this.form.headImg;
	    		this.$refs.modalCropperImg.modal = true;
	    	},
	    	//获取截取的头像地址
	    	getHeadImg(url){
	    		this.form.headImg = url;
	    	},
	    	//保存
	    	save(){
	    		this.loading = true;
	    		this.Axios.AdminInfo.Update(this.form)
	            .then(res =>{
	            	if(!res) return false;
	            	this.loading = false;
	            })
	    	}
	    },
		created: function () {
			this.Axios.AdminInfo.DistrictAll()
	            .then(res =>{
	            	this.district = res.data;
	            })
	        this.Axios.AdminInfo.Get()
	            .then(res =>{
	            	if(!res) return false;
	            	var data = res.data;
	            	if(data.length==0) return false;
	            	this.form.headImg = data.headImg;
	            	this.form.reallyName = data.reallyName;
	            	this.form.age = data.age;
	            	this.form.sex = String(data.sex);
	            	this.form.idNumber = data.idNumber;
	            	this.form.district = [parseInt(data.province) , parseInt(data.city) ,parseInt(data.area)];
	            	this.form.address = data.address;
	            })
			this.$store.dispatch('CHANGE_ROUTE',{name:'个人信息修改',route:'/update/admininfo/',action:1,closable:true});
        },
	}
</script>